<script setup lang="ts">
import { ref, onMounted } from 'vue';

const props = withDefaults(
    defineProps<{
        content?: string;
        width?: number | string;
        height?: number | string;
        delay?: number | string;
        marginTop?: number | string;
    }>(),
    {
        content: '暂无内容',
        width: 300,
        height: 300,
        delay: 0,
        marginTop: 100,
    },
);

const show = ref(false);
const OSS_URL = import.meta.env.VITE_OSS_HOST;
onMounted(() => {
    setTimeout(() => (show.value = true), Number(props.delay));
});
</script>

<template>
    <div v-if="show" class="empty" :style="{ marginTop: `${marginTop}rpx` }">
        <slot>
            <image
                :src="`${OSS_URL}/empty.png`"
                :style="{
                    width: `${width}rpx`,
                    height: `${height}rpx`,
                }"
            />
            <div class="empty-content">
                {{ content }}
            </div>
        </slot>
    </div>
</template>

<style lang="scss" scoped>
.empty {
    width: 100%;
    height: inherit;
    display: flex;
    flex: 1;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-align: center;

    .empty-content {
        width: 100%;
        color: #666666;
        font-size: 28rpx;
        line-height: 42rpx;
        margin-top: 50rpx;
    }
}
</style>
